<template>
	<view class="main">
		<block v-if="options.type!=8">
			<view class="line"></view>
			<view class="address">
				<view class="address-head flex al-item ju-cont">
					<view class="address-head-left">存储地址</view>
					<view class="address-head-right flex al-item">
						<text class="u-line-1" style="width: 150rpx;">{{userInfo.account_address}}</text>
						<image @click="copy" src="@/static/ico/pay-copy.png" mode=""></image>
					</view>
				</view>
				<view class="address-des">由平台代理创建的地址，可帮您存储数字藏品、完成链上寄售</view>
			</view>
			
			<view class="goods" v-if="goods.id">
				<view class="goods-title">商品详情</view>
				<view class="goods-cont flex al-item">
					<view class="goods-cont-img">
						<image :src="goods.thumb" mode="aspectFill"></image>
					</view>
					<view class="goods-cont-info">
						<view class="goods-cont-info-title u-line-1">{{goods.title}}</view>
						<!-- <view class="goods-cont-info-des u-line-1">{{goods.user_name}}</view> -->
						<view class="goods-cont-info-price u-line-1">¥{{goods.base_price}}</view>
					</view>
				</view>
				<!-- <view class="pay-price">
					支付金额<text>￥{{goods.base_price}}</text>
				</view> -->
				<view class="goods-title">支付方式</view>
				<view class="pay-type">
					<view class="pay-type-1" :class="{ active: paytype === 'wechat' }" @click="payTypeClick('wechat')">
						<u-icon name="../../static/ico/yue_icon.png" size="20"></u-icon>
						使用银行卡支付
					</view>
					<view class="pay-type-2" :class="{ active: paytype === 'money' }" @click="payTypeClick('money')">
						<u-icon name="../../static/images/logo_icon.png" size="20"></u-icon>
						余额支付( {{ (userMay*1).toFixed(2) }} )
					</view>
				</view>
			</view>
		</block>

		<block v-if="options.type==8">
			<view class="number">
				<view class="number-title">消耗次数</view>
				<view class="number-cont">
					<view class="number-cont-title">{{number}}</view>
					<view class="number-cont-des">剩余{{max}}次</view>
				</view>
			</view>
			<view class="pay-number">
				<view class="pay-number-cont flex al-item ju-cont">
					<view class="pay-number-cont-left">
						购买数量
						<u-number-box v-model="number" :min="1" :max="max"></u-number-box>
					</view>
					<view class="pay-number-cont-right">¥{{goods.base_price}}</view>
				</view>
				<view class="pay-number-des">本藏品限定购买数量{{goods.rule_draw_count||0}}个</view>
			</view>
		</block>
		<view class="pay-type">
			<!-- <u-radio-group v-model="paytype" placement="column" :multiple="false">
				<view class="pay-type-item flex al-item ju-cont" @click="payTypeClick('wechat')">
					<view class="pay-type-item-left flex al-item">
						<image src="../../static/ico/wechat.png" mode="aspectFill"></image>
						<view class="pay-type-item-left-info">
							<view class="pay-type-item-left-info-title"> 疯传数藏</view>
							<view class="pay-type-item-left-info-des">选择 疯传数藏钱包支付</view>
						</view>
					</view>
					<u-radio name="wechat"></u-radio>
				</view>
				<view class="pay-type-item flex al-item ju-cont" @click="payTypeClick('money')">
					<view class="pay-type-item-left flex al-item">
						<image src="@/static/images/logo.png" mode=""></image>
						<view class="pay-type-item-left-info">
							<view class="pay-type-item-left-info-title">余额(￥{{(userMay*1).toFixed(2)}})</view>
							<view class="pay-type-item-left-info-des">选择余额支付</view>
						</view>
					</view>
					<u-radio name="money"></u-radio>
				</view>
			</u-radio-group> -->
			<!-- <view class="address-des red">注意：您1小时之内只能取消3-5次订单，超出次数将限购1天</view> -->
		</view>
		<view class="notice">
			<view class="notice-title">{{options.type==8?'报名须知':'购买须知'}}</view>
			<view class="notice-des" v-html="purchase.value"></view>
			<view class="red">注意：您1小时只能取消3次订单，超出次数将限购1小时</view>
		</view>
		<view class="pay">
			<view class="savepadding savebottom" style="height: 214rpx;"></view>
			<view class="pay-nav savepadding savebottom">
				<view v-if="false" class="pay-nav-pact flex al-item">
					<u-checkbox-group @change="pact=!pact" shape="circle">
						<!--  -->
						<u-checkbox class="agreement" :checked="pact":size="12" ></u-checkbox>
						<!-- <text class="agreement_title">点击确认支付则视为同意</text> -->
					</u-checkbox-group>
					<text>点击确认支付则视为同意</text>
					<text style="color: #000;" @click="show=true">《{{agreement.title}}》</text>
					<!-- <text>123</text> -->
					<!-- <text style="color: #000;" @click="show2=true">《反洗钱承诺书》</text> -->
				</view>
				<view class="footer">
					<view class="footer-price">
						<view class="rmb">￥</view>
						<view class="price">{{(goods.base_price*number).toFixed(2) }}</view>
					</view>
					<view class="">
						<u-button  type="primary" :plain="true" :loading="loading" v-if="paytype=='money'" @click="topaw">
							<text>确认支付</text>
							<text style="font-size: 30rpx;font-weight: 600;">→</text>
						</u-button>
						<u-button :disabled="yhkDisabled"  :loading="loading" type="primary" :plain="true" v-else @click="purchaseGoods">
							<text>确认支付</text>
							<text style="font-size: 30rpx;font-weight: 600;">→</text>
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- 数字交易服务协议 -->
		<u-popup bgColor="transparent" round="32rpx" :show="show" @close="close">
			<view class="draw-lots-main-popup savepadding savebottom">
				<view class="header flex al-item ju-cont">
					<view class="header-title">
						{{agreement.title}}
					</view>
					<view class="header-close">
						<u-icon @click="close" name="close" color="#999999" size="22"></u-icon>
					</view>
				</view>
				<scroll-view scroll-y class="draw-lots-list">
					<view class="pay-pact" v-html="agreement.value"></view>
				</scroll-view>
				<button @click="pact=true,show=false">我已阅读并同意</button>
			</view>
		</u-popup>
		
		<!-- 反洗钱承诺书 -->
		<u-popup bgColor="transparent" round="32rpx" :show="show2" @close="close">
			<view class="draw-lots-main-popup savepadding savebottom">
				<view class="header flex al-item ju-cont">
					<view class="header-title">
						反洗钱承诺书
					</view>
					<view class="header-close">
						<u-icon @click="show2 = false" name="close" color="#999999" size="22"></u-icon>
					</view>
				</view>
				<PayPactMoney />
				<button @click="show2=false;pact=true">我已阅读并同意</button>
			</view>
		</u-popup>

		<u-popup :show="pwd_show" overlayOpacity="0.8" mode="center"
			@close="pwd_show=false,password=''">
			<!-- <view class="material">
				<view class="pwd-header">
					<view class="material-header-close" @click="pwd_show=false,password=''">
						<u-icon name="close" color="#BFBFCA" size="18"></u-icon>
					</view>
				</view>
				<view class="pwd-header-title">请输入交易密码</view>
				<view class="material-cont pwd-cont">
					<PasswordInput v-model="password" @confirm="confirmPwd"></PasswordInput>
				</view>
			</view> -->
			<view class="transaction">
				 <view class="transaction-text">
					<text>请输入交易密码</text>
				 </view>
				 <view class="transaction-input">
					<u-code-input :focus="true" @finish="confirmPwd"  size="44" dot v-model="password" mode="box" :space="0" :maxlength="6" hairline></u-code-input>
				 </view>
			</view>
		</u-popup>
		<u-modal :show="tshow" @confirm="GoPle" asyncClose content="开通钱包后才可以使用余额支付" @cancel="tshow=false"
			cancelColor="#A2A2A2" confirmColor="#00000" confirm-text="去开通" show-cancel-button></u-modal>
			
		<u-modal :show="yshow" @confirm="goChongzhi" asyncClose content="钱包余额不足请充值后继续交易" @cancel="yshow=false"
			cancelColor="#A2A2A2" confirmColor="#00000" confirm-text="去充值" show-cancel-button></u-modal>

	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import PasswordInput from "@/components/PasswordInput.vue"
	import PayPactMoney from '@/components/PayPactMoney.vue'
	export default {
		mixins: [mixin],
		components: {
			PasswordInput,
			PayPactMoney
		},
		data() {
			return {
				loading: false,
				number: 1,
				paytype: 'wechat',
				pact: true,
				show: false,
				show2: false,
				goods: {},
				purchase: {},
				options: {},
				agreement: {
					title2: '反洗钱承诺书'
				},
				userMay: 0,
				tshow: false,
				yshow: false,
				password: '',
				pwd_show: false,
				buy_passwd: false,
				dxStatus:true,
				wallet_status: 0,
				yhkDisabled:false
			}
		},
		onLoad(e) {
			// console.log('[参数]', e)
			this.appInfoFunc()
			this.options = e
			if(this.options.token){
				this.pact = true
				this.paytype = e.paytype
			}
           
		},
		onShow() {
			this.collectionInfo(this.options.id)
			if (this.options.type == 8) {
				this.getPurchase('drawing_agreement')
				// this.getPurchase('drawing_instructions')
			} else {
				this.getPurchase('purchase_instructions')
			}
			this.getUser()
			this.transaction_service_agreement()
		},
		computed: {
			...mapState(['userInfo', 'token']),
			max() {
				return this.goods?.rule_draw_count - this.goods?.person_draw_all_count || 0
			}
		},
		
		onBackPress(e) {
			// if(this.options.token){
			// 	uni.navigateBack({
			// 			delta:2,
			// 	})
			// }else{
			 
			// }
			// console.log(e)
			// uni.navigateBack({
			// 		delta:1,
			// 		fail(e) {
			// 			console.log(e)
			// 		}
			// })	
			// return true
		},
		methods: {
		    async appInfoFunc(){
			 let res = await this.$http({
			 	url: this.$api.appInfo,
			 	method: 'get',
			 	hideLoading: true,
			 	needToken: true,
			 	data: {}
			 })
			 this.dxStatus = res.data.DX
			 
		    },
			async getUser() {
				let res = await this.$http({
					url: this.$api.getUser,
					method: 'POST',
					hideLoading: true,
					needToken: true,
					data: {}
				})
				if (res.code == 200) {
					this.userMay = res.data.money
					this.wallet_status = res.data.wallet_status
					this.buy_passwd = res.data.buy_passwd ? true : false
				}
			},
			GoPle() {
				this.tshow = false
				uni.navigateTo({
					// url: '/pages/save/editpwd'
					url: '/pages/wallet/openWallet'
				})
			},
			goChongzhi () {
				this.yshow = false
				uni.navigateTo({
					url: '/pages/wallet/recharge'
				})
			},
			confirmPwd() {
				this.pwd_show = false
				this.submit()
			},
			async submit() {
				this.loading = true
				let res = await this.$http({
					url: this.$api.purchaseGoods,
					method: 'POST',
					hideLoading: true,
					needToken: true,
					data: {
						special_id: this.options.id,
						paytype: this.paytype,
						ordertype: 0,
						goods_num: this.number,
						password: this.password,
						dx:this.options.token || 1234
					}
				})
				this.loading = false
				// console.log('[藏品详情]',data)
				if (res.code == 200) {
					uni.showToast({
						title: '支付成功，等待审核中',
						duration: 2000,
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/Order/index'
					});
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					});
				}


			},
			async topaw() {
				if (!Boolean(this.wallet_status)) {
					this.tshow = true
					return
				}
				if (this.max < 1 && this.goods.type == 8) {
					uni.$u.toast('您的购买次数已用完')
					return
				}
				if (!this.pact) {
					uni.$u.toast('请先勾选协议')
					return
				}
				
				if(!this.options.token && this.dxStatus){
					uni.navigateTo({
						url:`/pages/Order/webView?id=${this.options.id}&paytype=${this.paytype}`
					})
					return
				}
				
				if (this.userMay - (this.goods.base_price * this.number) >= 0) {
					if (this.buy_passwd) {
						this.password = ''
						this.pwd_show = true
					} else {
						this.tshow = true
					}
				} else {
					// uni.$u.toast('您的余额不足')
					this.yshow = true
				}
			},
			copy() {
				uni.setClipboardData({
					data: this.userInfo.account_address,
					showToast: false,
					success: () => {
						this.$u.toast('内容已复制到剪切板')
					}
				});
			},
			//生成订单
			async purchaseGoods() {
				if (this.max < 1 && this.goods.type == 8) {
					uni.$u.toast('您的购买次数已用完')
					return
				}
				if (!this.pact) {
					uni.$u.toast('请先勾选协议')
					return
				}
				if(!this.options.token && this.dxStatus){
					uni.navigateTo({
						url:`/pages/Order/webView?id=${this.options.id}&paytype=${this.paytype}`
					})
					return
				}
				this.yhkDisabled = true
				this.loading = true
				let res = await this.$http({
					url: this.$api.purchaseGoods,
					method: 'POST',
					hideLoading: true,
					needToken: true,
					data: {
						special_id: this.options.id,
						paytype: this.paytype,
						ordertype: 0,
						goods_num: this.number,
						dx:this.options.token || 1234
					}
				})
				this.loading = false
				setTimeout(()=>{
					this.yhkDisabled = false
				},5000)
				if (res.code == 200) {
					let id = res.data.id
					if (id) {
						this.topay(id)
					} else {
						uni.showToast({
							title: '支付失败',
							duration: 2000,
							icon: 'none'
						});
					}

				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					});
				}
				// let param = {
				// 	"charset":"utf-8",
				// 	"signType":"01",
				// 	"data":'{"head":{"version":"1.0","method":"sandPay.fastPay.quickPay.index","productId":"00000016","accessType":"1","mid":"6888803043479","plMid":"","channelType":"07","reqTime":"20220514110736"},"body":{"userId":194,"orderCode":"E5125258006432002022051252481029","totalAmount":"000009999900","subject":"special","body":"\\u6570\\u5b57\\u85cf\\u54c1","extend":"special","orderTime":"20220514110736","currencyCode":156,"notifyUrl":"https:\/\/zyr1.xingrunkeji.cn\/notify","frontUrl":"https://zyr1.xingrunkeji.cn/payorder"}}',
				// 	"sign":"WGOYLw7Njef+SiKuO+z2NKYygrNC6rtULcT7QbWTRzRs+u7KyMsBUX92/C+OCjSPkL33PqmLq/9M8j6lJd5mOZl4xk86DcfX56kOGjB25f3h6LpL+q9IhsZSJvnSrwpP1mwT5udVuQ6AxZGHzqQai7F1iyJPfQbQ6tnZbNfUOH0RTCUNDm3g7pCEIsQuwJ9d6hWfz1VLTFe6w9XnsA3Qv4rMjzZcBZ2qBOsPdXd7EF9vcOoF0R1mieX6hb9oAGoUK9NLsIbQbE0SAGGDH1xJXQr9BXWbvTwCIqb9L/LD5qHNOQRxqzA+pma1Rft6qWCGpYxTn2obH54aGVCBkyDX5w==",
				// };
				// uni.request({
				// 	url: 'https://cashier.sandpay.com.cn/fastPay/quickPay/index',
				// 	    data: param,
				// 	    method: 'POST',
				// 	    header: {
				// 	        'Content-Type': 'application/x-www-form-urlencoded'
				// 	    },
				// 	    dataType: 'json',
				// 	    success: (response) => {
				// 	        console.log('请求登录后返回的数据：', response);
				// 	    },
				// 	    fail: (err) => {
				// 	        console.log('登录失败：', err);
				// 	    },
				// 	    complete: (com) => {
				// 	        console.log('请求登录结束：', com);
				// 	    }
				// })
			},
			//整体藏品详情
			async collectionInfo(id) {
				let data = await this.$http({
					url: this.$api.collectionInfo,
					method: 'GET',
					hideLoading: true,
					data: {
						id: id
					}
				})
				console.log('[整体藏品详情]', data)
				if (data.code == 200) {
					this.goods = data.data

				}
			},
			//购买须知
			async getPurchase(e) {
				let data = await this.getConfigDetail(e)
				if (data.code == 200) {
					this.purchase = data.data
				}
			},
			//购买协议
			async transaction_service_agreement() {
				let data = await this.getConfigDetail('transaction_service_agreement')
				if (data.code == 200) {
					this.agreement = data.data
				}
			},
			payTypeClick(e) {
				if (!this.loading) {
					this.paytype = e
				}
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		// background-color: $nft-page-bg-color;
		background: #F7F8FA;
		
		.u-popup {
			::v-deep.u-modal__content__text {
				color: #292A40 !important;
				font-weight: 600;
			}
			::v-deep.u-modal__button-group__wrapper--confirm {
				.u-modal__button-group__wrapper__text {
					color: #292A40 !important;
					// font-weight: 600;
				}
			}
		}
		

		.flex {
			display: flex;
		}

		.al-item {
			align-items: center;
		}

		.ju-cont {
			justify-content: space-between;
		}
		
		.line {
			height: 20rpx;
			background: #F7F8FA;
		}
		.address {
			padding: 24rpx 28rpx;
			border-bottom: 1rpx solid #f8f8f8;
			background-color: #fff;

			&-head {
				color: #333;

				&-left {
					font-size: 32rpx;
					font-weight: 600;
					line-height: 40rpx;
					color: #16172F;
				}

				&-right {
					font-size: 24rpx;
					color: #8C93AA;

					image {
						width: 32rpx;
						height: 30rpx;
					}
				}
			}

			&-des {
				margin-top: 24rpx;
				padding: 16rpx 12rpx;
				background: #F7F8FA;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #8C93AA;
				line-height: 34rpx;
			}
		}

		.red {
			// margin: 28rpx;
			// padding: 16rpx 12rpx;
			// background: #F8F8F8;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #FF6A6A;
			line-height: 34rpx;
		}

		.goods {
			padding: 28rpx 28rpx 40rpx 28rpx;
			border-bottom: 1rpx solid #f8f8f8;
			background: #fff;
			margin-top: 20rpx;
			
			&-title {
				color: #16172F;
				font-size: 32rpx;
				font-weight: 600;
			}
			
			&-cont {
				padding: 28rpx 0;

				&-img {
					width: 160rpx;
					height: 160rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				&-info {
					margin-left: 26rpx;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;

					&-title {
						color: #000;
					}

					&-des {
						color: #999999;
						margin-top: 10rpx;
					}

					&-price {
						margin-top: 28rpx;
						font-size: 26rpx;
						font-weight: bold;
						color: #000;
						line-height: 30rpx;
					}
				}
			}

			.pay-price {
				text-align: right;
				font-size: 26rpx;
				font-weight: 600;
				color: #666666;
				line-height: 36rpx;

				text {
					font-weight: 600;
					color: #C61515;
				}
			}

		}

		.number {
			padding: 0 34rpx;

			&-title {
				font-size: 28rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 40rpx;
			}

			&-cont {
				margin-top: 30rpx;
				padding-bottom: 16rpx;

				&-title {
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 40rpx;
				}

				&-des {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
				}

				border-bottom: 1rpx solid #f8f8f8;
			}
		}

		.pay-number {
			padding: 0 34rpx;
			margin-top: 52rpx;

			&-cont {
				padding-bottom: 16rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 34rpx;
				border-bottom: 1rpx solid #f8f8f8;
			}

			&-des {
				margin-top: 22rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
				line-height: 36rpx;
				padding-bottom: 60rpx;
				border-bottom: 1rpx solid #f8f8f8;
				// background: #fff;
			}
		}
		
		.pay-type {
			display: flex;
			margin-top: 28rpx;
			&-1, &-2 {
				width: 50%;
				height: 80rpx;
				display: flex;
				font-size: 24rpx;
				background: #F5F7FA;
				align-items: center;
				justify-content: center;
				color: #292A40;
				font-weight: 600;
				border-radius: 8rpx;
				.u-icon {
					margin: -8rpx 8rpx 0 0;
				}
			}
			&-1 {
				&:nth-child(1) {
					margin-right: 20rpx;
				}
			}
			.active {
				background: #468EFF;
				color: #fff;
			}
		}

		.pay-type {
			&-item {
				padding: 28rpx 28rpx 28rpx 42rpx;
				border-bottom: 1rpx solid #f8f8f8;

				&-left {
					image {
						width: 56rpx;
						height: 56rpx;
					}

					&-info {
						margin-left: 18rpx;

						&-title {
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
						}

						&-des {
							font-size: 24rpx;
							font-weight: 400;
							color: #A0A0A0;
							line-height: 34rpx;
						}
					}
				}
			}
		}

		.notice {
			padding: 32rpx 36rpx;
			background: #fff;

			&-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #16172F;
				line-height: 40rpx;
			}

			&-des {
				font-size: 24rpx;
				color: #8C93AA;
				line-height: 34rpx;
				margin-top: 18rpx;
			}
		}

		.pay {

			&-nav {
				padding: 28rpx 26rpx 48rpx 26rpx;
				box-sizing: border-box;
				width: 100%;
				height: 214rpx;
				position: fixed;
				left: 0;
				bottom: 0;
				background: #FFF;
				box-shadow:
					0px 4rpx 4rpx 4rpx rgba(219, 219, 219, 0.5),
					0px 4rpx 4rpx 4rpx rgba(219, 219, 219, 0.5);

				&-pact {
					// font-size: 24rpx;
					display: flex;
					flex-wrap: wrap;
					font-weight: 400;
					color: #A0A0A0;
					line-height: 34rpx;

					text {
						font-size: 20rpx;
						// color: #5F7EA3;
					}
					
				}
				.footer {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					&-price {
						display: flex;
						align-items: center;
						font-size: 48rpx;
						.rmb {
							font-size: 24rpx;
						}
					}
					.u-button {
						width: 268rpx;
						height: 64rpx;
					}
				}

				button {
					display: flex;
					justify-content: space-around;
					height: 80rpx;
					// background-color: #000;
					// margin-top: 26rpx;
					font-size: 32rpx;
					// font-weight: 400;
					border-radius: 34rpx;
					color: #16172F;
					border: 1rpx solid #979797;
				}
			}
			.agreement_title {
				color: #A0A0A0;
			}
		}

		.draw-lots-main-popup {
			padding: 48rpx 38rpx;
			background: #1E2020;
			border-radius: 30rpx 30rpx 0px 0px;

			.header {
				&-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 44rpx;
				}

				&-close {}
			}

			.draw-lots-list {
				margin-top: 20rpx;
				height: 50vh;
				overflow-y: auto;

				.pay-pact {
					font-size: 24rpx;
					font-weight: 400;
					color: #A0A0A0;
					line-height: 34rpx;
				}
			}

			button {
				height: 80rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: #4E422C;
				background-color: #F2E0BC;
				line-height: 80rpx;
			}
		}

		.material {
			width: calc(100vw - 68rpx);
			background: #FFFFFF;
			border-radius: 30rpx;
			border: 4rpx solid rgba(0, 0, 0, 0.6);

			&-header {
				height: 107rpx;
				background: rgba(225, 165, 52, 0.2);
				border-radius: 20rpx 20rpx 0px 0px;
				position: relative;

				&-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
					line-height: 107rpx;
					text-align: center;
				}

				&-close {
					position: absolute;
					right: 28rpx;
					top: 28rpx;
				}
			}

			.pwd-header-title {
				font-size: 48rpx;
				font-weight: 600;
				color: #333333;
				line-height: 66rpx;
				text-align: center;
				margin-top: 78rpx;
			}

			.pwd-cont {
				margin-top: 60rpx;
				margin-bottom: 114rpx;
			}

		}
		.transaction{
			width: calc(100vw - 140rpx);
			height: 358rpx;
			&-text{
				margin-top: 60rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292A40;
			}
			&-input{
				display: flex;
				justify-content: center;
			    margin-top: 48rpx;
			}
			&-tips{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777E90;
				margin-left: 100rpx;
				margin-top: 36rpx;
			}
		}
	}
	
</style>
